<template>
  <div class="app-container">
    <!-- <div class="title">工单编号:{{ workOrderCode }}</div> -->
    <div class="stage-box" v-show="resultType === 'workOrder'">
      <div class="stage-title">生产</div>
      <div class="flex-box" v-for="(item, index) in snList" :key="item.snCode + index" style="margin-bottom: 20px">
        <div class="flex-box">
          <div class="sn-box">
            <div>SN码</div>
            <div>{{ item.snCode }}</div>
          </div>
          <div class="sn-box-arrow"></div>
        </div>
        <div style="flex:1;">
          <div class="stage-right" style="
                  flex: 1;
                  display: flex;
                  flex-wrap: wrap;
                  border-top: 1px solid #ddd;
                  border-left: 1px solid #ddd;
                ">
            <div class="box-card" v-for="(item2, index2) in item.reportList" :key="item2.workorderId + index2">
              <div style="text-align: center; font-size: 14px; font-weight: 600">
                {{ item2.workstationName }}
              </div>
              <div style="font-weight: 500">{{ item2.userName }}</div>
              <div>
                <span class="box-card-left-title">上料防错：</span>{{
                  moment(item2.startReporting).format("YYYY-MM-DD HH:mm:ss")
                }}
              </div>
              <div>
                <span class="box-card-left-title">工位自检：</span>{{ item2.checkTime }}
              </div>
              <div>
                <span class="box-card-left-title">报工：</span>{{
                  item2.finishReporting ? moment(item2.finishReporting).format("YYYY-MM-DD HH:mm:ss") : ''
                }}
              </div>
              <div>
                <span class="box-card-left-title">时长：</span>{{ item2.actualTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="arrows-bottom">
        <div class="arrows-line"></div>
        <div class="arrows"></div>
      </div>

      <div style="display:flex;min-width:100%;">
        <div style="flex:1;margin-right:10px;">
          <div class="collect-box">
            <div>
              生产汇报单:
              <span class="collect-box-recptCode">{{
                formData.productReportNum
              }}</span>
              {{ formData.productReportTime }}
            </div>
          </div>
        </div>
        <div style="width:20%;margin-right:10px;">
          <el-row :gutter="10">
            <el-col :span="24 / backList.length" v-for="(item, index) in backList" :key="index">
              <div class="collect-box">
                生产退料单:{{ item.backCode }}
                {{ item.backUser }} {{ item.backTime }}
              </div>
              <div style="display: flex;justify-content: center;align-items: center;"
                v-if="backQcIqcList && backQcIqcList.length > 0">
                <img src="./down-arrow.png" />
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="width:20%;">
          <el-row :gutter="10">
            <el-col :span="24 / supplyList.length" v-for="(item, index) in supplyList" :key="index">
              <div class="collect-box">
                生产补料单:{{ item.supplyCode }}
                {{ item.createBy }} {{ item.createTime }}
              </div>
              <div style="display: flex;justify-content: center;align-items: center;position:relative;">
                <div style="position:absolute;top:10px;" v-if="supplyHeaderList.length > 0">
                  <img style="width:8px;height: 110px;" src="./down-arrow4.png" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="stage-box" v-show="resultType === 'item'" style="padding-left: 50px">
      <div class="stage-title">采购</div>
      <div class="flex-box">
        <div class="flex-box center-box" style="margin-top: 20px" v-for="(item, index) in procureDataList"
          :key="item + index">
          <div class="flow-section" style="position: relative">
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
            <div>
              {{ item.worker }} <span v-show="item.worker">|</span>
              {{ item.opeTime }}
            </div>
            <div style="
                display: flex;
                justify-content: center;
                align-items: center;
              " v-show="(item.result !== '1' && item.result !== 'C')">
              <img src="./down-arrow.png" />不合格
            </div>
            <div v-show="item.result != '1' && item.index == 4">采购退料单</div>
          </div>
          <div style="position: relative; height: fit-content"
            v-show="(item.result === '1' || item.result === 'C') && index < procureDataList.length - 1">
            <div style="position: absolute; top: -6px; left: 10px; width: 30px">
              通过
            </div>
            <img src="./right-arrow.png" style="height: fit-content; margin: 10px" />
          </div>
          <!-- <div>销售出库单</div> -->
        </div>
      </div>
    </div>
    <div class="stage-box" v-show="resultType === 'item'" style="padding-left: 50px">
      <div class="stage-title">生产</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：{{ produceData.workorderCode }}</span>
        <span>SN码：{{ produceData.snCode }}</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>{{ produceData.workstationName }}</div>
          <div>
            {{ produceData.workstationName }} | {{ produceData.userName }}
          </div>
        </div>
        <img src="./right-arrow.png" style="height: fit-content; margin: 10px" />
        <div class="flow-section">
          <div>上料防错</div>
          <div>
            {{
              moment(produceData.startReporting).format("YYYY-MM-DD HH:mm:ss")
            }}
          </div>
        </div>
        <img src="./right-arrow.png" style="height: fit-content; margin: 20px" />
        <div class="flow-section">
          <div>工位检验</div>
          <div>{{ produceData.checkTime }}</div>
        </div>
        <img src="./right-arrow.png" style="height: fit-content; margin: 20px" />
        <div class="flow-section">
          <div>报工</div>
          <div>{{ moment(produceData.finishReporting).format("YYYY-MM-DD HH:mm:ss") }}</div>
        </div>
      </div>
    </div>
    <div class="stage-box" v-show="resultType === 'snCode'">
      <div class="stage-title">生产</div>
      <div class="flex-box station-list" style="flex-wrap: wrap">
        <div class="fx-item flex-box" v-for="(item, index) in snList2" :key="item + index">
          <div class="fx-item-left">
            <div style="font-weight: 500">{{ item.workstationName }}</div>
            <div>{{ item.userName }}</div>
          </div>
          <div class="fx-item-right">
            <div class="fx-item-top">
              <div class="flex-box" style="justify-content: space-between">
                <div class="fx-item-remark">
                  <span class="fx-item-remark-title">上料防错：</span>{{ item.startReporting }}
                </div>
                <div class="fx-item-remark" style="width: 210px; text-align: left">
                  <span class="fx-item-remark-title">工位检验：</span>{{ item.checkTime }}
                </div>
              </div>
              <div class="flex-box" style="justify-content: space-between">
                <div class="fx-item-remark">
                  <span class="fx-item-remark-title">报工：</span>{{ item.finishReporting }}
                </div>
                <div class="fx-item-remark" style="width: 210px; text-align: left">
                  <span class="fx-item-remark-title">时长：</span>{{ item.actualTime }}
                </div>
              </div>
            </div>
            <el-table :data="item.itemList ? item.itemList : []" height="250" border style="width: 100%">
              <el-table-column prop="itemCode" label="物料编码">
              </el-table-column>
              <el-table-column prop="itemName" label="物料名称">
              </el-table-column>
              <el-table-column prop="specification" label="规格型号">
              </el-table-column>
              <el-table-column prop="snCodeItem" label="序列号">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-box">
      <div style="display:flex;min-width:100%;">
        <div style="flex:1;margin-right:10px;">
          <div class="stage-title">质检</div>
          <div>
            <div>
              <div class="sn-flow-box flex-box" v-for="(item, index) in qcDataList" :key="item.snCode + index">
                <div class="sn-box">
                  <div>SN码</div>
                  <div>{{ item.snCode }}</div>
                </div>
                <div class="sn-box-arrow"></div>
                <div v-for="(item2, index2) in item.dataList" :key="item2.qcType + index2" class="flex-box">
                  <div class="center-box">
                    <div>{{ item2.qcType }}</div>
                    <div>
                      {{ item2.worker }} | {{ item2.opeBeginTime }}
                      <span v-show="item2.opeEndTime">~</span>
                      {{ item2.opeEndTime }}
                    </div>
                    <div v-show="item2.result !== '1'">
                      <div style="
                              display: flex;
                              justify-content: center;
                              align-items: center;
                            ">
                        <img src="./down-arrow.png" />不通过
                      </div>
                      <div>质量异常，返工生产</div>
                    </div>
                  </div>
                  <div v-show="item2.result === '1' && index2 < item.dataList.length - 1
                    " class="center-box" style="margin: 0 10px">
                    <div>通过</div>
                    <img src="./right-arrow.png" style="height: fit-content" />
                  </div>
                </div>
              </div>
              <div>
                <div class="center-box collect-box">
                  FQC质检单：<span class="collect-box-recptCode">{{
                    formData.fqcNum
                  }}</span>
                  <span style="margin-right: 80px">创建时间：{{ formData.fqcCreateTime }}</span>
                  <span style="margin-right: 80px">检验时间：{{ formData.fqcCheckTime }}</span>
                  <span style="margin-right: 80px">检验人：{{ formData.checkUser }}</span>
                  <span>检验结果：<el-tag type="success" v-show="formData.checkResult == 1">合格</el-tag><el-tag type="danger"
                      v-show="formData.checkResult === 0">不合格</el-tag></span>
                </div>
                <!-- <div class="flex-box">
                      <div class="center-box">
                        <img src="./down-arrow.png"/>
                        <div>检验</div>
                        <div>{{ formData.checkUser }} | {{ formData.fqcCheckTime }}</div>
                      </div>
                      <div class="center-box" style="margin: 28px 20px;">
                        <div>不通过</div>
                        <img src="./right-arrow.png" style="height: fit-content" />
                      </div>
                      <div style="margin-top: 44px;">
                        质量异常，返工生产
                      </div>
                    </div> -->
              </div>
            </div>
          </div>
        </div>
        <div style="width:20%;margin-right:10px;">
          <el-row :gutter="10" v-for="index in [0, 1]" v-key="index">
            <el-col :span="24 / backQcIqcList.length" v-for="(item, i) in backQcIqcList" :key="i">
              <div v-if="index == 0">
                <div class="collect-box">
                  IQC质检单:{{ item.iqcCode }}
                  {{ item.iqcInspectionTime }}
                </div>
              </div>

              <div v-else>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <img src="./down-arrow.png" />
                </div>
                <div class="collect-box">
                  检验:
                  {{ item.inspector }} {{ item.iqcInspectionTime }}~{{ item.inspectDate }}
                  ({{ item.checkResult == 1 ? '合格' : (item.checkResult == 0 ? '不合格' : '') }})
                </div>
              </div>
            </el-col>
          </el-row>
          <div style="display:flex;">

          </div>
          <!--检测结果： 1-合格 0-不合格-->

          <!--
          <div style="display: flex;justify-content: center;align-items: center;" v-show="backWmDataList.length > 0">
            <img src="./down-arrow.png" />
          </div> -->

        </div>

        <div style="width:20%;">
          <div style="display: flex;justify-content: center;align-items: center;">
            <!--
                                        <img src="./down-arrow4.png" />
                                        -->
          </div>
        </div>
      </div>



    </div>
    <div class="stage-box">
      <div style="display:flex;min-width:100%;">
        <div style="flex:1;margin-right:10px;">
          <div class="stage-title">仓储</div>
          <div v-show="formData.checkResult === 1" class="flex-box center-box"
            style="align-items: center; margin-top: -41px; justify-content: center">
            <!-- <img src="./down-arrow2.png" style="height: 80px;
                    width: 14px;" /> -->
            <div class="arrows-bottom" style="width: auto">
              <div class="arrows-line"></div>
              <div class="arrows"></div>
            </div>
            <div style="padding-top: 10px">检验合格</div>
          </div>
          <div>
            <div class="center-box collect-box" v-show="wmData1.wmName || wmData1.recptCode">
              {{ wmData1.wmName }}<span v-show="wmData1.wmName">：</span><span class="collect-box-recptCode">{{
                wmData1.recptCode
              }}</span>
              {{ wmData1.opeTime }}
            </div>
            <img v-show="wmDataList.length" src="./down-arrow.png" style="margin-left: 84px" />
            <div class="flex-box">
              <div class="flex-box center-box" style="margin-top: 20px" v-for="(item, index) in wmDataList" :key="item">
                <div class="flow-section">
                  <div>{{ item.wmName }}</div>
                  <div>{{ item.recptCode }}</div>
                  <div>{{ item.worker }} | {{ item.opeTime }}</div>
                </div>
                <img v-show="index < wmDataList.length - 1" src="./right-arrow.png"
                  style="height: fit-content; margin: 20px" />
              </div>
            </div>
          </div>
        </div>
        <div style="width:20%;margin-right:10px;">
          <el-row :gutter="10">
            <el-col :span="24 / backWmDataList.length" v-for="(item, index) in backWmDataList" :key="index">
              <div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <img src="./down-arrow.png" />
                </div>
                <div class="collect-box">
                  物料入库单:{{ item.recptCode }}
                  {{ item.createTime }}
                </div>
              </div>
            </el-col>
          </el-row>


          <div v-for="(item, index) in backStoreWmDataList" :key="index">
            <div style="display: flex;justify-content: center;align-items: center;">
              <img src="./down-arrow.png" />
            </div>
            <div class="collect-box">
              PDA物料入库:
              {{ item.worker }} {{ item.opeTime }}
            </div>
          </div>
        </div>

        <div style="width:20%;">
          <el-row :gutter="10">
            <el-col :span="24 / supplyHeaderList.length" v-for="(item, index) in supplyHeaderList" :key="index">
              <div class="collect-box">
                生产领料单:{{ item.issueCode }}
                {{ item.createBy }} {{ item.createTime }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="24 / supplyHeaderList.length" v-for="(item, index) in supplyHeaderList" :key="index">
              <div style="display: flex;justify-content: center;align-items: center;">
                <img src="./down-arrow.png" />
              </div>
              <div class="collect-box">
                PDA物料出库:
                {{ item.updateBy }} {{ item.updateTime }}
              </div>
            </el-col>
          </el-row>

        </div>
      </div>

    </div>

    <div class="stage-box" style="padding-left: 50px;">
      <div class="stage-title" style="left: -30px">销售发货</div>
      <div class="flex-box" v-show="resultType === 'item'">
        <span style="margin-right: 30px">工单编号：{{ formData.workOrderCode }} </span>
        <span>SN码：{{ formData.snCode }}</span>
      </div>
      <div style="margin-top: 20px;display: inline-block;" v-for="(item, index) in saleDataList" :key="item">
        <div class="flex-box center-box">
          <div class="flow-section">
            <div>{{ item.saleName }}</div>
            <div>{{ item.saleNum }}</div>
            <div>
              {{ item.worker }} <span v-show="item.worker">|</span>
              {{ item.opeTime }}
            </div>
            <div v-show="item.result !== '1'">
              <div style="
                display: flex;
                justify-content: center;
                align-items: center;
              ">
                <img src="./down-arrow.png" />不通过
              </div>
              <div>返工生产</div>
            </div>
          </div>
          <img v-show="item.result == '1' && index < saleDataList.length - 1" src="./right-arrow.png"
            style="height: fit-content; margin: 20px" />
        </div>
      </div>
    </div>
    <div class="stage-box">
      <div class="stage-title" style="left: -30px">售后</div>
      <!-- <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>维修</div>
          <div>2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>保养</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
      </div> -->
    </div>
    <div class="stage-box" v-if="resultType == 'snCode'">
      <div class="stage-title" style="left: -30px">三码合一</div>
      <div class="flex-box" style="margin-left: 20px;">
        <div class="codeCon">
          <div class="codeLabel">SN码(序列码)</div>
          <div v-if="formData.snCode">
            <svg id="snCodeRef"></svg>
          </div>
        </div>
        <div class="codeCon">
          <div class="codeLabel">装配码(ZN码)</div>
          <div v-if="formData.assemblyCode">
            <div ref="assemblyCodeRef"></div>
          </div>
        </div>
        <div class="codeCon">
          <div class="codeLabel">售后码</div>
          <div v-if="formData.aftersaleCode">
            <div ref="aftersaleCodeRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode"
export default {
  name: "compreTrace",
  data() {
    return {
      moment: moment,
      workOrderCode: null,
      snList: [], //生产阶段
      qcDataList: [], //质检阶段
      wmData1: {}, //仓储1
      wmDataList: [], //仓储2
      saleDataList: [], //销售发货阶段
      procureDataList: [], //采购阶段
      produceData: {}, //生产
      formData: {},
      resultType: null,
      snList2: [],
      backWmDataList: [], //物料入库
      backStoreWmDataList: [],  //退料-PDA物料入库信息
      supplyHeaderList: [],  //补料-生产领料信息
      backList: [],  //退料集合
      backQcIqcList: [], //退料质检信息
      supplyList: [], //生产补料单信息
    };
  },
  created() { },
  mounted() {
    // this.init(this.formData,this.resultType);
  },
  methods: {
    reset() {
      this.workOrderCode = null
      this.snList = [] //生产阶段
      this.qcDataList = [] //质检阶段
      this.wmData1 = {} //仓储1
      this.wmDataList = [] //仓储2
      this.saleDataList = [] //销售发货阶段
      this.procureDataList = [] //采购阶段
      this.produceData = {} //生产
      this.formData = {}
      this.resultType = null
      this.snList2 = []

      this.backWmDataList = [] //物料入库
      this.backStoreWmDataList = []  //退料-PDA物料入库信息
      this.supplyHeaderList = []  //补料-生产领料信息
      this.backList = []  //退料集合
      this.backQcIqcList = [] //退料质检信息
      this.supplyList = [] //生产补料单信息
    },
    init(formData, resultType) {
      this.reset()
      this.formData = formData;
      this.resultType = resultType;
      this.workOrderCode = formData.workOrderCode;
      this.procureDataList = formData.procureDataList
        ? formData.procureDataList
        : [];
      this.produceData = formData.produceData ? formData.produceData : {};
      this.snList = formData.snList ? formData.snList : [];
      this.snList2 = formData.snList ? formData.snList : [];
      this.qcDataList = formData.qcDataList ? formData.qcDataList : [];
      const wmDataList = formData.wmDataList ? formData.wmDataList : [];
      const that = this;
      wmDataList.forEach((item) => {
        if (item.index === 1) {
          that.wmData1 = item;
        }
      });
      this.wmDataList = wmDataList.filter((item) => item.index !== 1);
      this.saleDataList = formData.saleDataList ? formData.saleDataList : [];

      this.backWmDataList = formData.backWmDataList ? formData.backWmDataList : [] //物料入库
      this.backStoreWmDataList = formData.backStoreWmDataList ? formData.backStoreWmDataList : []  //退料-PDA物料入库信息
      this.supplyHeaderList = formData.supplyHeaderList ? formData.supplyHeaderList : []  //补料-生产领料信息
      this.backList = formData.backList ? formData.backList : []  //退料集合
      this.backQcIqcList = formData.backQcIqcList ? formData.backQcIqcList : [] //退料质检信息
      this.supplyList = formData.supplyList ? formData.supplyList : [] //生产补料单信息


      this.$nextTick(() => {
        this.printQrCode("snCode", "barcode");
        this.printQrCode("assemblyCode");
        this.printQrCode("aftersaleCode");
      })

    },
    printQrCode(property, type) {
      if (this.formData[property]) {
        if (type) {
          JsBarcode("#" + property + "Ref", this.formData[property], {
            height: "100px"
          });
          return;
        } else {
          this.$refs[property + "Ref"].innerHTML = "";
          new QRCode(this.$refs[property + "Ref"], {
            width: 100,
            height: 100,
            text: this.formData[property],
          });
        }
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-left: 20px;
  padding-top: 0;
  font-size: 14px;
}

.title {
  // font-size: 20px;
  background: #4ec4c5;
  padding: 10px;
  color: #fff;
}

.stage-box {
  ::v-deep {
    .el-card__body {
      padding: 8px;
    }
  }

  .sn-flow-box {
    padding: 12px;
    margin-left: 20px;
  }

  border-left: 1px dotted #ccc;
  padding: 16px;
  border-bottom: 1px dotted #ccc;
  position: relative;

  .stage-title {
    position: absolute;
    padding: 4px;
    background: #fff;
    left: -26px;
    top: 50%;
  }

  .sn-box {
    text-align: center;
    background-color: #e7faf0;
    color: #13ce66;
    line-height: 18px;
    padding: 10px;
    height: 56px;
  }

  .sn-box-arrow {
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-top: 28px solid transparent;
    border-left: 28px solid #e7faf0;
  }

  .fx-item {
    width: 50%;
    margin-bottom: 22px;

    .fx-item-left {
      width: 120px;
      text-align: center;
      padding-top: 12px;
    }

    .fx-item-right {
      flex: 1;

      .fx-item-top {
        padding: 10px 24px;
        background: #e4f1f8;
      }

      .fx-item-remark {
        text-align: left;
        line-height: 26px;

        // margin-bottom: 6px;
        // padding: 10px;
        // background: #00b3ee;
        // color: #fff;
        // font-size: 14px;
        // border-radius: 5px;
        .fx-item-remark-title {
          width: 72px;
          display: inline-block;
          text-align: right;
        }
      }
    }
  }
}

.box-card {
  width: 25%;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 8px;

  .box-card-left-title {
    color: #666;
  }
}

.arrows-bottom {
  width: 100%;
  margin-top: 14px;

  .arrows-line {
    width: 6px;
    height: 24px;
    background: #2ecc71;
    margin: 0 auto;
  }

  .arrows {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #2ecc71;
    margin: 0 auto;
  }
}

.collect-box {
  width: 100%;
  // background-color: #ffe9d0;
  background-color: #e3edf9;
  padding: 8px 16px;
  border-radius: 5px;
  text-align: center;
  word-wrap: break-word;

  .collect-box-recptCode {
    font-weight: 500;
    margin-right: 80px;
    color: #f41515;
  }
}

.flex-box {
  display: flex;
}

.flex-box .codeCon {
  margin-right: 30px;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.flex-box .codeLabel {
  height: 40px;
  width: 100px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #6ab87f;
  border: #bbe0cb 1px solid;
  border-radius: 5px;
  background-color: #e6faef;
  margin-bottom: 20px;
}

.center-box {
  text-align: center;
}



.quality-inspection-certificate {}
</style>
